<template>
  <div class="store">
    <input autocomplete="off" v-model="name" class="name" type="text" />
    <input autocomplete="off"
      v-model="description"
      class="description"
      type="text"
      placeholder="填写备注信息"
    />
    <div class="time submit" @click="submitUpdate">提交信息</div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'updateStore',
  computed: {
    ...mapState(['storeId']),
    ...mapState(['ownerId']),
  },
  data() {
    return {
      name: '',
      description: '',
      updateTime: '',
    };
  },

  mounted() {
    this.getStoreInfo(this.storeId);
  },

  methods: {
    async getStoreInfo(storeId) {
      try {
        const res = await this.$axios.post(`http://work.caike.online/store`, {
          action: 'queryStoreById',
          id: storeId,
        });
        console.log('res', res);
        if (res.data.status == 1) {
          var info = res.data.info;
          this.name = info.name;
          this.description = info.description;
          this.updateTime = info.updateTime;
        }
      } catch (err) {
        this.$message({
          message: '请求发送失败',
          type: 'error',
          offset: 70,
        });
        console.log(err);
      }
    },
    async submitUpdate() {
      if (this.name.length == 0 || this.description.length == 0) {
        this.$message({
          message: '请完整填写信息噢~',
          type: 'error',
          offset: 70,
        });
        return;
      }
      try {
        const res = await this.$axios.post(`http://work.caike.online/store`, {
          action: 'update',
          id:this.storeId,
          ownerId: this.ownerId,
          name: this.name,
          description: this.description,
          updateTime: this.updateTime,
        });
        console.log('res', res);
        if (res.data.status == 1) {
          this.$message({
            message: '修改成功',
            type: 'success',
            offset: 70,
          });
          window.location.href = '/store';
        } else {
          this.$message({
            message: '修改失败',
            type: 'error',
            offset: 70,
          });
        }
      } catch (err) {
        this.$message({
          message: '发送请求失败',
          type: 'error',
          offset: 70,
        });
        console.log(err);
      }
    },
  },
};
</script>ipt

<style lang="less" scoped>
.store {
  width: 100%;
  height: 200px;

  display: flex;
  flex-direction: column;
  padding: 10px;
  color: white;

  .name {
    text-align: start;
    font-size: 18px;
    // font-weight: bold;
    padding-bottom: 5px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.719);
  }
  .name:hover {
    // font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.8s ease;
  }
  .description {
    font-family: '楷体';
    padding-top: 5px;
    text-align: start;
    vertical-align: top;
    text-indent: 2em;
    font-size: 14px;
    height: 150px;
  }
  .time {
    //   align-self: flex-end;
    text-align: end;
    padding-top: 5px;
    border-top: 1px dashed rgba(255, 255, 255, 0.719);
    font-size: 12px;
  }

  input {
    vertical-align: top;
    background-color: transparent;
    outline: none;
    color: white;
  }
  .submit {
    text-align: center;
    text-decoration: underline;
  }
  .submit:hover {
    color: rgba(0, 255, 255, 0.664);
    font-weight: bold;
    cursor: pointer;
  }
}

.option {
  // transition: all 1.0s ease;
  padding: 5px 20px;
  // margin: 0px 10px;
  font-size: 12px;
  color: white;
  border-top: 1px solid rgba(255, 255, 255, 0.699);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-radius: 10px;

  background-color: transparent;

  .b_open:hover {
    cursor: pointer;
  }
}
</style>